<template>
  <!-- 登录流程页 -->
  <div>
    <!-- 主页面 -->

    <div class="sginAll">
      <div class="sginCenter">

      <!-- 标题 -->
      <div class="enterSign">四川酒店通入驻流程</div>
      <!-- 标题广告 -->
      <div class="titleText">
        致力于为加入平台的每个酒店商家提供稳定和可预测的收入流
      </div>
      <!-- 步骤说明 -->
      <div class="stepsBox">
        <div class="stepsAll" v-for="(item, i) in stepsData" :key="`a${i}`">
          <div class="numClass">{{ item.num }}</div>
          <div class="textClass">
            <span class="s1">{{ item.bigText }}</span>
            <span class="s2">{{ item.minText }}</span>
          </div>
        </div>
      </div>
      <!-- 详细步骤展示 -->
       <div class="massageClass">
        <div class="stepsMassage">
        <div class="setpMian">
          <div class="step" v-for="(item, i) in stepMassageData" :key="`s${i}`">
            <div class="stepTitle">{{ item.title }}</div>
            <t-steps
            readonly
              direction="vertical"
              layout="vertical"
               theme="dot"
              v-for="(childItem, index) in item.setpBox"
              :key="`p${index}`"
            >
              <t-step-item
                :title="childItem.word1"
                :content="childItem.des"
              ></t-step-item>
            </t-steps>
          </div>
        </div>
      </div>
       </div>
   
      <!-- 入驻按钮 -->
      <div class="btn">
        <button @click="pushDetails">入驻四川酒店通</button>
      </div>
    </div>
  </div>

</div>

</template>
<script>
import StepDetails from "./stepDetails.vue";
export default {
  components: {
    StepDetails,
  },
  data() {
    return {
      // 步骤说明
      stepsData: [
        { num: "01", bigText: "上传酒店资料", minText: "上传酒店相关资料" },
        { num: "02", bigText: "平台审核", minText: "审核1-3个工作日" },
        { num: "03", bigText: "签署合同", minText: "签署完成上传产品" },
      ],
      // 详细步骤
      stepMassageData: [
        {
          title: "酒店照片",
          setpBox: [
            {
              word1: "酒店门头照片",
              des: "酒店门头照片需要展示酒店错处的建筑物与完整的酒店正门",
            },
            { word1: "酒店大厅照片", des: "包括酒店大厅及大厅休息区" },
          ],
        },
        {
          title: "营业执照",
          setpBox: [
            {
              word1: "营业执照照片",
              des: "营业执照状态需为存续状态且在有效期内",
            },
          ],
        },
        {
          title: "签约合同",
          setpBox: [
            { word1: "个人签约", des: "个人与四川酒店通合同，合同由个人签署" },
            {
              word1: "公司/法人签约",
              des: "以公司名义与四川酒店通合同，合同由法人签署",
            },
            {
              word1: "公司/法人授权签约",
              des: "以公司名义与四川酒店通合同，法人可委托办理签约，合同由委托人签署",
            },
          ],
        },
        {
          title: "财务信息",
          setpBox: [
            { word1: "对公账户", des: "开户账户为注册公司开户账号" },
            { word1: "对私账户", des: "开户账户为个人银行卡账号" },
          ],
        },
      ],
    };
  },
  methods: {
    //切换页面到详情步骤
    pushDetails() {
      this.$router.push('/stepDetails')
    },
  },
};
</script>
<style lang="less" scoped>
.sginAll {
  width: 100%;
  height: 100vh;
  background-image: url(/public/login/image5.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .sginCenter{
  
  .enterSign {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 103px 0 13px 0;
    height: 69px;
    font-weight: bold;
    font-size: 56px;
    line-height: 66px;
    text-align: center;
    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
  font-weight: bold;
  line-height: 66px;
    background: linear-gradient(to right, #1e43fd 0%, #15a2fb 100%);
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent; /*给文字设置成透明*/
  }
  .titleText {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 0 48px 0;
    height: 28px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #1d2129;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .stepsBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 48px;
    
  }
  .stepsAll {
    margin-right: 96px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 301px;
    height: 110px;
    padding: 26px 0 26px 24px;
    box-sizing: border-box;
    color: #fff;
    background: linear-gradient(to right, #047af0 50%, #12a0f8);
    .numClass {
      font-size: 54px;
      font-weight: 700;
    }
    .textClass {
      padding-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .s1 {
        font-size: 24px;
      }
      .s2 {
        padding-top: 5px;
        font-size: 16px;
        opacity: 0.5;
      }
    }
  }
  .massageClass{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .stepsMassage {
   
    padding: 56px 0;
    width: 1730px;
    box-sizing: border-box;
    height: 507px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 14px 14px 14px 14px;

    .setpMian {
      width: 1570px;
      height: 395px;
      margin: 0 80px;
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      .step {
        width: 298px;
        margin-right: 88px;
        .stepTitle {
          width: 298px;
          height: 32px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24px;
          color: #333;
          line-height: 32px;
          text-align: left;
          margin-bottom: 24px;
        }
      }
    }
  }
}

}

::v-deep .t-steps-item__icon {
background-color: #3270ff !important;
border:none;
}
::v-deep .t-steps-item__title{
height: 28px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 20px;
color: #1D2129;
line-height: 28px;
text-align: left;
font-style: normal;
text-transform: none;
}
::v-deep .t-steps-item__description{
  width: 267px;
height: 48px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #4E5969;
line-height: 24px;
text-align: left;
font-style: normal;
text-transform: none;
}
.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  button {
    width: 400px;
    height: 60px;
    background: #3270ff;
    border: none;
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    font-size: 20px;
    line-height: 28px;
  }
}
</style>
